<!DOCTYPE html>
<html lang="zh" mode="light" xmlns:th="http://www.thymeleaf.org">

<head>
    <div th:replace="~{theme/Grace/common :: meta}"></div>
    <meta name="keywords" th:content="${#servletContext.getAttribute('configMap')['keywords']}" />
    <meta name="description" th:content="${#servletContext.getAttribute('configMap')['description']}" />
    <meta property="og:description" th:content="${#servletContext.getAttribute('configMap')['description']}" />
    <link rel="dns-prefetch" th:href="@{'//fonts.googleapis.com'}">
    <link rel="dns-prefetch" th:href="@{'//fonts.loli.net/css'}">
    <link rel="dns-prefetch" th:href="@{'//cdn.jsdelivr.net'}">
    <link th:href="@{'https://fonts.loli.net/css?family=Poppins:400,500,600'}" rel="stylesheet">
    <link th:href="@{'https://fonts.loli.net/css?family=Open+Sans:400,700&amp;subset=latin-ext'}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{${baseLink} + '/source/css/bootstrap/css/bootstrap.min.css'}">
    <link rel="stylesheet" th:href="@{${baseLink} + '/source/fonts/font-awesome/css/font-awesome.min.css'}">
    <link rel="stylesheet" th:href="@{${baseLink} + '/source/fonts/font-awesome/css/font-awesome-animation.min.css'}">
    <link rel="stylesheet" th:href="@{${baseLink} + '/source/css/animate.min.css'}">
    <link rel="stylesheet" th:href="@{${prefix} + '/source/css/app.css'}">
    <style>
        .main ul li::before {
            width: 0;
            height: 0;
            border: none;
        }
    </style>
</head>

<body>
<div class="wrap" id="wrap">
    <main class="main">
        <div class="container">
            <div class="search-query">
                <input type="text" id="keyword-input" class="input" placeholder="输入关键字" data-list=".highlight_list" autocomplete="off">
                <ul class="highlight_list" >
                    <li th:each="post,iterStat: ${postList}">
                        <a class="post-item" href="javascript:void(0)" th:data-url="${post.link}" >📚 [[${post.title}]]</a>
                    </li>
                </ul>
            </div>
        </div>
    </main>
</div>
<span th:if="${activeTheme.configMap['useCDN'] == 'true'}">
    <script th:src="@{'https://cdn.jsdelivr.net/gh/moonlightL/CDN@' + ${activeTheme.configMap['version']} + '/Grace/source/js/jquery.min.js'}"></script>
    <script th:src="@{'https://cdn.jsdelivr.net/gh/moonlightL/CDN@' + ${activeTheme.configMap['version']} + '/Grace/source/js/jquery.hideseek.min.js'}"></script>
</span>
<span th:if="${activeTheme.configMap['useCDN'] == 'false'}">
    <script th:src="@{${prefix} + '/source/js/jquery.min.js'}"></script>
    <script th:src="@{${prefix} + '/source/js/jquery.hideseek.min.js'}"></script>
</span>
<script>
    $(function() {
        // 由于是子窗口，只能不断检测 sessionStorage 的数据，判断父窗口是否修改主题模式
        setInterval(function() {
            checkMode();
        }, 200);

        $("#keyword-input").hideseek({
            highlight: true,
            nodata: '没有相应数据'
        });

        function checkMode() {
            let CURRENT_MODE = "current_mode";
            let mode = sessionStorage.getItem(CURRENT_MODE);
            if (!mode) {
                let hour = (new Date()).getHours();
                mode = (hour >= 6 && hour < 18 ? "light" : "dark");
            }
            $("html").attr("mode", mode);
        }

        $("a.post-item").on("click", function () {
            let link = $(this).data("url");
            window.parent.$.pjax({url: "/" + link, container: '#wrap', fragment: '#wrap'});
        });
    })
</script>
</body>

</html>
